<template>
  <div class="safety-edit">
    <dialog-subtitle>
      在此可更改登陆密码，若忘记登陆密码，则可在“登录页-忘记密码”处通过手机或邮箱进行找回。
    </dialog-subtitle>
    <el-form class="main-container-main__form" :model="form" :rules="rules" ref="form" :disabled="loading"
             @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
             label-position="top"
    >
      <el-form-item prop="oldPwd" label="旧密码：">
        <password-input v-model="form.oldPwd" placeholder="8-20个数字/字母/特殊字符组成" auto-complete="off"></password-input>
      </el-form-item>
      <el-form-item prop="newPwd" label="新密码：">
        <password-input v-model="form.newPwd" placeholder="8-20个数字/字母/特殊字符组成" auto-complete="off"></password-input>
      </el-form-item>
      <el-form-item prop="confirmPwd" label="确认新密码：" :error="formError">
        <password-input v-model="form.confirmPwd" placeholder="请再次输入新密码" auto-complete="off"></password-input>
      </el-form-item>
      <el-form-item no-spacing>
        <el-button
          :block="true"
          type="primary"
          native-type="submit"
          :loading="loading"
        >确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script type="text/jsx">
  import {factory, form, logout} from '@/build';
  import {passwordUpdateApi as saveApi} from "@/services/api/user";

  const initForm = () => {
    return {
      oldPwd: undefined,
      newPwd: undefined,
      confirmPwd: undefined
    };
  };

  export default {
    name: "safety-password",

    mixins: [form, logout],

    inject: ['setDialogHeader'],

    data() {
      return {
        labelWidth: '120px',
        editVisible: false,
        form: initForm(),
        formError: '',
        rules: {
          oldPwd: {
	          required: true, message: '旧密码不能为空'
          },
          newPwd: factory.getRule('password', {
            emptyMessage: '新密码不能为空',
          }),
          confirmPwd: [
            {
              required: true, message: '请再次输入密码'
            }, {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.newPwd) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            },
          }
          ]
        },
      };
    },
    computed: {
      ...mapState({
        user: state => state.user,
      }),
    },

    methods: {
      toggleEdit() {
        this.editVisible = !this.editVisible;
      },
    },

    created() {
      this.setDialogHeader('登录密码设置');
    },

    mounted() {

      this.bindSave(saveApi, 'saveForm', 'form', {
        beforeSend: (data) => {
          this.formError = '';
          return data;
        },
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          this.$emit('on-success');

          const vm = this.$messageTip({
            message: '密码修改成功，请重新登录账号！',
            type: 'success',
            showClose: false,
            width: consts.DIALOG_SIZE_NORMAL,
            goTo: <router-link to={
              {
                name: 'login'
              }
            }><el-button type="primary" block class="icon-link" nativeOnClick={() => {vm.close();this.logout();}}>确定</el-button></router-link>
          });
        },
        afterFail: ([result, data]) => {
          this.formError = data.message;
        }
      });
    }

  };
</script>

<style lang="scss" scoped>

</style>
